@page "/scheduler/scroll-time"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.Calendars
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This demo illustrates the way of manually scrolling to specific time on Scheduler.</p>
</SampleDescription>
<ActionDescription>
   <p>In this demo, the way of manually scrolling to specific time on Scheduler has been demonstrated by using the <code>ScrollTo</code> method of Scheduler. </p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" @ref="ScheduleObj" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleViews>
                <ScheduleView Option="View.Day"></ScheduleView>
                <ScheduleView Option="View.Week"></ScheduleView>
                <ScheduleView MaxEventsPerRow="12" Option="View.TimelineDay"></ScheduleView>
                <ScheduleView MaxEventsPerRow="12" Option="View.TimelineWeek"></ScheduleView>
            </ScheduleViews>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-header">Properties</div>
    <div class="property-panel-content">
        <table id='property' title='Properties' class='property-panel-table' style="width: 100%;">
            <tbody>
                <tr style="height: 50px">
                    <td style="width: 30%">
                        <div>
                            Scroll To
                        </div>
                    </td>
                    <td style="width: 50%;">
                        <div>
                            <SfTimePicker TValue="DateTime?" Width="100px" Format="HH:mm" @bind-Value="TimeValue">
                                <TimePickerEvents TValue="DateTime?" ValueChange="OnValueChange"></TimePickerEvents>
                            </SfTimePicker>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

@code{
    SfSchedule<ScheduleData.AppointmentData> ScheduleObj;
    public DateTime CurrentDate = new DateTime(2020, 1, 16);
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetEmployeeEventData();
    public DateTime? TimeValue = new DateTime(DateTime.Today.Year, DateTime.Today.Month, DateTime.Today.Day, 9, 0, 0);
    public async void OnValueChange(Syncfusion.Blazor.Calendars.ChangeEventArgs<DateTime?> args)
    {
        await this.ScheduleObj.ScrollToAsync(args.Text);
    }
}
